<template>
	<scroll-view class="home-scroll" :scroll-y="true" @scrolltolower="loadMoreFeatured">
		<!-- <web-view :src="iframeUrl"></web-view> -->
		<!-- 背景图片 -->
	<!-- 	<image class="home-bg" :src="IMAGE_URL + '/static/index/top_bg.png'" mode="aspectFill"></image> -->
		<image class="home-bg" :src="IMAGE_URL + '/static/images/homeBg.png'" mode="aspectFill"></image>
		
		
		<!-- 1. 顶部地区搜索和消息 -->
		<!-- <header-vue title="华旺城" titPosition="left" bgColor="transparent" titleColor="#fff"></header-vue>
		<view class="address-selector">
			<view class="location-selector">
				<u-icon name="map" color="#fff" size="32rpx"></u-icon>
				<text class="location-text">保定</text>
				<u-icon name="arrow-down-fill" color="#fff" size="20rpx"></u-icon>
			</view>
			
		</view> -->
		
		<view class="header-position">
			<header-vue :searchStatus="true" titPosition="left" bgColor="transparent" titleColor="#fff">
				<template v-slot:search>
				  <view class="flex slot-title" style="justify-content: flex-start; width: 100vw">
					<view class="home-user-icon"><image :src="IMAGE_URL + '/static/images/home-user-icon.png'"></image></view>
				    <view>师傅，欢迎您</view>
				  </view>
				</template>
			</header-vue>
		</view>
		<!-- 3. 第三部分：左侧小图片和右侧上下图片 -->
		<view class="section-three">
			<view class="left-image" >
				<view class="text-box">
					<view class="text-title">接单大厅</view>
					<view class="text-subtitle">专业人员，服务至上</view>
					<view class="text-button" @click="toOrder">前往接单</view>
				</view>
				<image :src="IMAGE_URL +  '/static/images/home-order-img.png' " class="icon7" mode="aspectFit" style="width: 168rpx; height: 176rpx;"></image> 
				
			</view>
			<view class="right-images">
				<view class="top-image right-img-box" @click="toMyOrder">
					<view class="text-box">
						<view class="text-title">我的订单</view>
						<view class="text-subtitle">共计12项任务</view>
					</view>
					<image :src="IMAGE_URL +  '/static/images/Mask group@2x.png' " class="icon5" mode="aspectFit" ></image>
				</view>
				<view class="bottom-image right-img-box" @click="toNews">
					<view class="text-box">
						<view class="text-title">消息中心</view>
						<view class="text-subtitle">您有21条未读消息</view>
					</view>
					<image :src="IMAGE_URL +  '/static/images/home-message-icon.png' " class="icon6" mode="aspectFit" ></image>
				</view>
			</view>
		</view>
		
		<view class="service-card" style="z-index: 6;">
			<view class="service-card-flex">
				<view class="text-center" @click="toOrder">
					<view class="service-numder">1</view>
					<view class="service-text">服务中</view>
				</view>
				<view class="text-center">
					<view class="service-numder">0</view>
					<view class="service-text">待服务</view>
				</view>
				<view class="text-center">
					<view class="service-numder font36">0</view>
					<view class="service-text  font24">今日任务</view>
				</view>
			</view>
			<view class="service-tip font24 text-center ">您还没有进行中的订单哦~</view>
			<view class="service-orders-btn font28"  @click="toOrderService" >去接单</view>
		</view>
		
		<view class="service-card service-card-order">
			<view class="service-card-flex">
				<view class="text-center">
					<view class="service-numder">1</view>
					<view class="service-text">服务中</view>
				</view>
				<view class="text-center">
					<view class="service-numder">0</view>
					<view class="service-text">待服务</view>
				</view>
				<view class="text-center">
					<view class="service-numder font36">0</view>
					<view class="service-text  font24">今日任务</view>
				</view>
			</view>
			<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"
				indicator-color="rgba(7,133,207,0.2)" indicator-active-color="#0785CF">
				<swiper-item v-for="(banner, index) in bannerList" :key="index" @click="goToBannerDetail(banner)">
					<view class="banner-item">
						
						<view class="swiper-box">
							<view class="flex between">
								<view class="flex star">
									<view class="swiper-title font30">宠物帮遛{{index}} </view>
									<view class="font24 time-color">05-27 12:00送达</view>
								</view>
								
								<view class="swiper-state font24">进行中</view>
							</view>
							<view class="flex start">
								<view class="item-icon"><image :src="IMAGE_URL +  '/static/images/address-icon.png' "></image></view>
								<view class="font24 swiper-des">上门地址：华望城社区物业中心</view>
							</view> 
							<view class="flex start ">
								<view class="item-icon"><image :src="IMAGE_URL + '/static/images/home-watch-icon.png'"></image></view>
								<view class="font24 swiper-des">预约时间：2025-06-03 10:53</view>
							</view> 
							
							<view class="flex start ">
								<view class="item-icon"><image :src="IMAGE_URL + '/static/images/hom-order-edit.png'"></image></view>
								<view class="font24 swiper-des">订单备注：提前电话联系</view>
							</view> 
						</view>
						
						
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 服务精选 -->
		<view class="featured-section">
			<!-- 装饰图标 -->
			<view class="flex between">
				<view class="section-header">
				<!-- 	<i class="iconfont icon-diamond font30"></i> -->
					<view class="study-icon">
						<image :src="IMAGE_URL + '/static/images/study-icon.png' "></image>
					</view>
					<view class="section-title">
						<text class="sub-tit">SELECTED</text>
						<text class="tit">推荐学习</text>
					</view>
				</view>
				<view class="flex">
					<view class="font24 more-text">查看全部</view>
					<view>
						<image class="featured-icon" :src="IMAGE_URL + '/static/images/arrow.png'" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			
			<view class="featured-list">
				<view class="featured-card" v-for="(item, index) in featuredList" :key="index" @click="goToServiceDetail(item)">
					<view class="featured-top">
						<!-- <image :src="item.image" style="width: 100%; height: 220rpx;" mode="aspectFill"></image> -->
						<image src= '../../static/banner.png' style="width: 100%; height: 220rpx;" mode="aspectFill"></image>
					</view>
					<view class="featured-meta">
						<view class="featured-name-overlay featured-title font28">{{ item.name }}{{ item.name }}{{ item.name }}</view>
						<view class="featured-name-overlay featured-des text-999 font20">{{ item.name }}{{ item.name }}</view>
						
					</view>
				</view>
			</view>
			<view class="list-footer">
				<text v-if="featuredLoading">正在加载...</text>
				<text v-else-if="!featuredHasMore">已经加载全部</text>
			</view>
		</view>
		
		<u-popup :show="orderShow" mode="center" @close="priceShow = false" :round="28">
			<view class="order-popup">
				<view class="order-tip font32">您有一个指派订单待接取</view>
				<view class="order-content">
					<view class="fext-between">
						<view class="font28">保洁清洗</view>
						<view class="flex end">
							<view class="address-icon">
								<image :src="IMAGE_URL + '/static/images/address-icon.png'"></image>
							</view>
							<view class="font28">西安市未央区旭宏中心709</view>
						</view>
					</view>
					<view class="fext-between font28">
						<view class="popup-list">服务内容</view>
						<view class="popup-name">精选日常保洁2小时</view>
					</view>
					<view class="fext-between font28">
						<view class="popup-list">预约时间</view>
						<view class="popup-name">精选日常保洁2小时</view>
					</view>
					<view class="fext-between font28">
						<view class="popup-list">服务内容</view>
						<view class="popup-name">2025-06-04 11:02</view>
					</view>
					<!-- 一口价订单 -->
					<view class="fext-between font28">
						<view class="popup-list">订单佣金</view>
						<view class="popup-name">￥60.00</view>
					</view>
					<!-- 议价订单 -->
				<!-- 	<view>
						<view class="fext-between font28">
							<view class="popup-list">维修佣金</view>
							<view class="popup-name">按实际维修情况计算</view>
						</view>
						<view class="fext-between font28">
							<view class="popup-list">上门佣金</view>
							<view class="popup-name">￥60.00</view>
						</view>
					</view> -->
					<!-- 竞价订单 -->
					<!-- 一口价订单 -->
					<!-- <view class="fext-between font28">
						<view class="popup-list">期望费用</view>
						<view class="popup-name">￥60.00</view>
					</view> -->
					<view class="fext-between font28">
						<view class="popup-list">订单备注</view>
						<view class="popup-name">不要用立白的洗洁精</view>
					</view>
					
				</view>
				<view class="btn-box">
					<view class="popup-btn cancel" @click="orderShow=false">拒绝</view>
					<view class="popup-btn confirm" @click="orderShow=false">接受</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup :show="orderLg" mode="center" @close="priceShow = false" :round="28">
			<view class="order-popup">
				<view class="order-tip font32">您有一个指派订单待接取</view>
				<view class="order-content">
					<view class="fext-between">
						<view class="font28">帮我取/帮我买/帮我办</view>
						<view class="flex end">
							<view class="address-icon">
								<image :src="IMAGE_URL + '/static/images/order-time.png'"></image>
							</view>
							<view class="font28">2025-06-04 11:02</view>
						</view>
					</view>
					<view class="fext-between font28">
						<view class="popup-list">服务内容</view>
						<view class="popup-name">取快递</view>
					</view>
					<!-- 帮我 取-->
					<view class="fext-between font28">
						<view class="popup-list">取件地址</view>
						<view class="popup-name">华望城涵化院一区韵达快递</view>
					</view>
					<view class="fext-between font28">
						<view class="popup-list">收货地址</view>
						<view class="popup-name">华望城悦华园二区34号楼4-204</view>
					</view>
					
					<!-- 帮我办 -->
					<!-- <view>
						<view class="fext-between font28">
							<view class="popup-list">宠物种类</view>
							<view class="popup-name">泰迪黑</view>
						</view>
						<view class="fext-between font28">
							<view class="popup-list">上门地址</view>
							<view class="popup-name">华望城悦华园二区34号楼4-204</view>
						</view>
					</view> -->
					<!-- 帮我买 -->
					<!-- <view>
						<view class="fext-between font28">
							<view class="popup-list">购买地址</view>
							<view class="popup-name">华望城涵化院一区韵达超市</view>
						</view>
						<view class="fext-between font28">
							<view class="popup-list">收货地址</view>
							<view class="popup-name">华望城悦华园二区34号楼4-204</view>
						</view>
						<view class="fext-between font28">
							<view class="popup-list">代买商品</view>
							<view class="popup-name">可乐一瓶、泡面</view>
						</view>
					</view> -->
					
					<view class="fext-between font28">
						<view class="popup-list">订单佣金</view>
						<view class="popup-name">￥60.00</view>
					</view>
					<view class="fext-between font28">
						<view class="popup-list">订单备注</view>
						<view class="popup-name">不要用立白的洗洁精</view>
					</view>
					
				</view>
				<view class="btn-box">
					<view class="popup-btn cancel" @click="orderLg=false">拒绝</view>
					<view class="popup-btn confirm" @click="orderLg=false">接受</view>
				</view>
			</view>
		</u-popup>
		
		
		
	
</scroll-view>

</template>

<script>
import headerVue from '@/components/header'
import { getCommunitynewsNoticeList, getHousekeepServiceList } from '@/api/index.js'
import appConfig from '@/config/app.js'
import { getRegeoEvent } from '@/utils/address.js'

export default {
	components: {
		headerVue
	},
	data() {
		return {
			IMAGE_URL: appConfig.IMAGE_URL,
			messageCount: 2,
			bannerList: [
				'服务订单',
				'服务订单',
			],
		
			hotRecommendList: [],
			flashSaleList: [],
			featuredList: [],
			// 服务精选分页
			featuredPage: 1,
			featuredLimit: 6,
			featuredHasMore: true,
			featuredLoading: false,
			iframeUrl: '',
			orderShow:false,
			orderLg:false,
			orderContent:{
				
			}
		}
	},
	computed: {
		addressComponent() {
			return this.$store && this.$store.state ? this.$store.state.addressComponent : null
		}
	},
	mounted() {
		this.getNoticeData()
		
		// this.updateLocationFromAddressComponent()
	},
	onLoad() {
	},
	watch: {
		addressComponent: {
			deep: false,
			immediate: false,
			// handler() {
			// 	this.updateLocationFromAddressComponent()
			// }
		}
	},
	methods: {
		
		clickSqEvent(url,tab) {
			this.$emit('clickSqEvent', {url:url,tab:tab})
		},
		// 获取通知数据
		async getNoticeData() {
			try {
				const res = await getCommunitynewsNoticeList({ page: 1, limit: 1 })
				if (res.errno === 0 && res.data.list.length > 0) {
					this.noticeData = {
						title: res.data.list[0].title,
						id: res.data.list[0].id
					}
				}
			} catch (error) {
				console.error('获取通知数据失败:', error)
			}
		},
	
	
		// 跳转到消息页面
		goToMessage() {
			uni.navigateTo({
				url: '/views/index/news'
			})
		},
		//跳转到消息
		toNews(){
			uni.navigateTo({
				url:'/views-master/home/news/index'
			})
		},
		// 跳转到Banner详情
		goToBannerDetail(banner) {
			console.log('Banner详情:', banner)
		},
		// 跳转到页面
		goToPage(item) {
			if (item.url == 3) {
				this.clickSqEvent(3,3)
				return;
			}
			uni.navigateTo({
				url: item.url
			})
		},
		// 跳转到更多页面
		goToMore(type) {
			uni.navigateTo({
				url: '/pages/community/community'
			})
		},
		// 跳转到服务详情
		goToServiceDetail(item) {
			uni.navigateTo({
				url: `/pages/shop/shop?id=${item.id}`
			})
		},
		// 触底加载更多服务精选
		async loadMoreFeatured() {
			if (this.featuredLoading || !this.featuredHasMore) return
			this.featuredLoading = true
			try {
				// 模拟接口请求，可替换为真实接口
				const res = await getHousekeepServiceList({ page: this.featuredPage, limit: this.featuredLimit })
				const more = res.data.list
				this.featuredList = this.featuredList.concat(more)
				this.featuredPage += 1
				if (this.featuredPage >= res.data.total) {
					this.featuredHasMore = false
				}
			} finally {
				this.featuredLoading = false
			}
		},
		toOrder(){
			uni.navigateTo({
			  url: `/views-master/home/order-hall/index`,
			});
		},
		toOrderService(){
			console.log(123)
			uni.navigateTo({
			  url: `/views-master/home/order-service/index`,
			});
		},
		toMyOrder(){
			uni.navigateTo({
			  url: `/views-master/home/order/indexJ`,
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.home-scroll {
	height: 100%;
	position: relative;
}

/* 1. 顶部地区搜索和消息 */
.address-selector {
	// display: flex;
	// align-items: center;
	// justify-content: space-between;
	background: transparent;
	padding: 0 32rpx;
	position: relative;
	margin-bottom: 20rpx;
	z-index: 1;

	/* #ifdef MP */
	margin-top: 20rpx;
	/* #endif */
}

.location-selector {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.location-text {
	font-size: 30rpx;
	color: #fff;
	font-weight: 500;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 12rpx;
}
.header-position{
	position: relative;
	.slot-title{
		padding-left:32rpx ;
		font-size:32rpx;
		color:#ffffff;
	}
	
	.home-user-icon{
		width: 36rpx;
		height: 32rpx;
		margin-right: 12rpx;
		image{
			width: 36rpx;
			height: 32rpx;
			
		}
		
	}
	
}


.home-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 800rpx;
	z-index: 0;
}



/* 2. Swiper Banner */
.banner-section {
	margin: 16rpx 32rpx;
	position: relative;
	z-index: 1;
}

.banner-swiper {
	height: 310rpx;
	border-radius: 20rpx;
	overflow: hidden;
}
::v-depp.uni-swiper-dot{
	width: 18rpx;
	height: 6rpx;
	
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.banner-item {
	position: relative;
	width: 100%;
	height: 100%;
}

.banner-image {
	width: 100%;
	height: 100%;
}

.banner-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(7, 133, 207, 0.8) 0%, rgba(37, 164, 239, 0.6) 100%);
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.banner-title {
	font-size: 48rpx;
	color: #fff;
	font-weight: 700;
	margin-bottom: 16rpx;
}

.banner-subtitle {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 32rpx;
}

.banner-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.tag {
	display: flex;
	align-items: center;
	gap: 8rpx;
	background: rgba(255, 255, 255, 0.2);
	padding: 12rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	color: #fff;
}

/* 3. 第三部分：左侧小图片和右侧上下图片 */
.section-three {
	display: flex;
	padding: 0 32rpx;
	margin-bottom: 32rpx;
	position: relative;
	z-index: 1;
	gap: 24rpx;
}

.left-image {
	position: relative;
	width: 332rpx;
	height: 300rpx;
	background: linear-gradient(180deg, #B7CCFF 0%, #709FF6 100%);
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 28rpx;

	.text-box {
		width: 100%;
		height: 100%;
		padding: 28rpx;
		box-sizing: border-box;

		.text-title {
			font-weight: bold;
			font-size: 44rpx;
			color: #FFFFFF;
			text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		}

		.text-subtitle {
			font-size: 24rpx;
			color: #fff;
			margin-top: 10rpx;
			margin-bottom: 40rpx;
		}

		.text-button {
			width: 140rpx;
			height: 48rpx;
			background: linear-gradient(180deg, #0785CF 0%, #006CAC 100%);
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 108, 172, 0.2);
			border-radius: 16rpx 0 16rpx 0;
			font-size: 24rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.icon7 {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
}

.right-images {

	display: flex;
	flex-direction: column;
	gap: 16rpx;
}


.top-image{
	background: linear-gradient(270deg, #FAD59A 0%, #FBBC81 100%);
	
}
.bottom-image{
	background: linear-gradient(90deg, #9E98FB 0%, #C9CCFF 100%);

}

 .right-img-box {
	background: linear-gradient(270deg, #FAD59A 0%, #FBBC81 100%);
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
	border-radius: 28rpx 28rpx 28rpx 28rpx;

	.text-box {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		z-index: 2;

		.text-subtitle {
			position: relative;
			font-size: 20rpx;
			color: #fff;
			margin-bottom: 10rpx;
		}

		.text-title {
			font-size: 36rpx;
			color: #FFFFFF;
			font-weight: bold;
			text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
		}
	}
}


.top-image,
.bottom-image {
	width: 332rpx;
	height: 140rpx;
	position: relative;
}

.icon5,
.icon6 {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 140rpx;
	height: 140rpx;
}




/* 6. 下面部分：静态模块 */

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
}

.section-title {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;

	.icon-remen {
		color: #FF2B2B;
		margin-right: 5rpx;
	}

	.icon-xianshimiaosha-06 {
		color:#DF9824;
		margin-right: 5rpx;
	}
}

	.service-card{
		height: 340rpx;
		padding: 40rpx 28rpx 0;
		margin: 28rpx 32rpx 28rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		box-sizing: border-box;
		position: relative;
		
		.service-card-flex{
			display: flex;
			justify-content: space-around;
			width: 100%;
		}
		.service-numder{
			text-align: center;
			color:$uni-color-primary;
			margin-bottom: 8rpx;
		}
		.service-text{
			text-align: center;
			color:$uni-text-color;
			margin-bottom: 60rpx;
		}
		.service-tip{
			color:$uni-text-color-grey;
			text-align: center;
			margin-bottom: 20rpx;
		}
		.service-orders-btn{
			color:$uni-text-color-inverse;
			width: 160rpx;
			height: 60rpx;
			background: $uni-color-primary;
			border-radius: 60rpx 60rpx 60rpx 60rpx;
			margin:0 auto;
			text-align: center;
			line-height: 60rpx;
		}
	}

	.service-card-order{
		height: 484rpx;
		.service-text{
			margin-bottom: 40rpx;
		}
	}
	.swiper-box {
		background: #E9F7FF;
		border-radius: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin-bottom: 28rpx;
		height: 250rpx;
		.time-color{
			color:$uni-text-color-grey;
			margin-bottom: 24rpx;
			margin-left: 12rpx;
		}
		.swiper-title{
			color:#222222;
			margin-bottom: 24rpx;
		}
		.swiper-state{
			color:$uni-color-warning;
			margin-bottom: 24rpx;
		}
		.swiper-des{
			color:$uni-text-color-grey1;
			margin-bottom: 20rpx;
		}
		.title-icon {
			width: 32rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}


		.item-icon{
			width: 30rpx;
			height: 30rpx;
			margin-bottom: 20rpx;
			margin-right: 6rpx;
			image{
				width: 30rpx;
				height: 30rpx;
				vertical-align: top;
			}
			
		}
	}
/* 服务精选 */
.featured-section {
	position: relative;
	margin: 28rpx 32rpx 0;
	padding: 28rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0,0,0,0.1);
	border-radius: 20rpx 20rpx 20rpx 20rpx;

	.section-header {
		justify-content: flex-start;

		.icon-diamond {
			color: #0785CF;
			margin-right: 4rpx;
		}
	}
}

.featured-icon {
	width: 26rpx;
	height: 26rpx;
	image{
		width: 26rpx;
		height: 26rpx;
		vertical-align: top;
	}
}
.study-icon{
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
	image{
		width: 36rpx;
		height: 36rpx;
		vertical-align: top;
	}
}


.section-title {
	position: relative;
	.sub-tit {
		position: absolute;
		font-weight: 800;
		font-size: 48rpx;
		color: rgba(7,133,207,0.08);
		top: -10rpx;
	}
	.tit {
		position: relative;
		font-size: 32rpx;
		color: #222222;

		&::after {
			position: absolute;
			width: 100%;
			height: 10rpx;
			content: "";
			bottom: 0;
			left: 0;
			border-radius: 10rpx 0 0 10rpx;
			z-index: -1;
			background: linear-gradient(to right, #9ed3f3, transparent);
		}
	}
}
.more-text{
	color:$uni-color-primary;
}
.featured-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24rpx;
	margin-top: 28rpx;
	.flex {
		align-items: baseline;
		justify-content: flex-start;
	}
}

.featured-card {
	background: #FFFFFF;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0rpx 4rpx 20rpx rgba(0,0,0,0.08);
}

.featured-top {
	position: relative;
	image{
		width: 100%;
		height: 220rpx;
	}
	
}

.featured-name-overlay {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.featured-title{
	width: 100%;
	height: 32rpx;
	line-height: 32rpx;
	color:$uni-text-color;
	margin-bottom: 6rpx;

}
.featured-des{
	color:$uni-text-color-grey; 
}


.featured-meta {
	padding: 16rpx;
}

.list-footer {
	padding: 20rpx 0 40rpx;
	text-align: center;
	color: #999;
	font-size: 24rpx;
}
.order-popup{
	width: 640rpx;
	//height: 694rpx;
	background: #FFFFFF;
	border-radius: 28rpx;
	padding: 40rpx 28rpx;
	.order-tip{
		color:$uni-text-color;
	}
	.order-content{
		padding: 8rpx 28rpx;
		box-sizing: border-box;
		margin: 28rpx 0 60rpx;
		//width: 630px;
		// height: 406px;
		background: #EFF9FF;
		border-radius: 12rpx;
		border: 1px solid #0785CF;
	}
	.fext-between{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		.popup-list{
			color:$uni-text-color-grey1;
		}
		.popup-name{
			color:$uni-text-color;
		}
	}
	.address-icon{
		width: 32rpx;
		height: 32rpx;
		margin-right: 6rpx;
		image{
			width: 32rpx;
			height: 32rpx;
			vertical-align: top;
		}
	}
	.btn-box{
		display: flex;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
		.popup-btn{
			width: 228rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76upx;
			border-radius: 60rpx;
			color:#ffffff;
			font-size: 36;
		
		}
		.confirm{
			background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
		}
		.cancel{
			background: linear-gradient( 90deg, #DF9824 0%, #F4B042 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(223,152,36,0.1);
		}
	}
	
}
</style>
